<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/swiper.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            position: relative;
            height: 600px;
        }

        body {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }

        .swiper-container {
            width: 100%;
            height: 100%;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }

        .swiper-container1 {
            width: 100%;
            height: 100%;
        }

        .swiper-slide1 {
            text-align: center;
            font-size: 18px;
            background: #fff;
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }

        ul {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        .box {
            width: 100%;
            height: 162px;
        }

        .box li {
            width: 20%;
            height: 74px;
            text-align: center;
            float: left;

        }

        img {
            width: 40px;
        }

        span {
            display: block;
            font-size: 12px;

        }
        .box1 img {
            width: 350px;
            height: 140px;
          
        }
        .open{
            width: 100%;
            height: 45px;
            background-color: #333;
            color: #fff;
            display: flex;

        }

        .open li{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .open li:nth-child(1){
            flex: 8%;

        }
        .open li:nth-child(1) img{
             width: 15px;
        }

        .open li:nth-child(2){
            flex: 10%;
        }
        .open li:nth-child(2) img{
            width:30px;

        }
        
        .open li:nth-child(3){
            flex: 57%;

        }
        .open li:nth-child(4){
            flex: 25%;
            background-color: #cd2525;
        }

        .search-wrapper{
            width:100%;
            height:44px;
            display:flex;
            background-color: #c82519;
            color: #fff;
            align-items: center;
            position: sticky;
            top: 0;
            z-index: 999;
        }

        .btn,.login{
            width:44px;
            height:44px;
        }

        .sou{
            height:30px;
            background-color:#fff;
            flex:1;
            border-radius: 15px;
            display:block;
            position:sticky;
            top:0px;
            z-index:999;
        }

        .login{
            display:flex;
            align-items:center;
            justify-content: center;
        }

        .btn span{
            margin: 14px 0 0 15px;
             width: 20px;
             height: 18px;
             display: block;
            background:url(./images/btn.png)  ;
            background-size: 100% 100%;

        }

        .JD{
            width: 20px;
            height: 15px;
            background:url(./images/jd.png);
            background-size: 20px 15px;
            margin: 8px 8px 0 15px;
            position: relative;
            z-index: 1;
            float: left;
        }

      .JD:after{
          content:'';
          width:1px;
          height:15px;
          display:block;
          background-color: #ddd;
          position: absolute;
          left:30px;
      }

        .fangdajing{
            display: block;
            width: 18px;
            height: 15px;
            background: url(./images/fangdjaing.png);   
            background-position: -80px 0;
            background-size: 200px;
            margin: 8px 0 0 15px;
            position: relative;
            z-index: 1;
            float: left;
        }


#footer{
    width:100%;
    height:54px;
    background-color:white;
    display:flex;
    position: fixed;
    bottom:0px;
}

#footer li{
    flex:20%;
    text-align: center;
    
    
}

#footer li img{
    width:64px;
}

    </style>
</head>
<body>
    <!-- top -->
    <ul class="open">
        <li><img src="./images/29.png"></li>
        <li><img src="./images/30.png"></li>
        <li>打开京东APP，购物更轻松</li>
        <li>立即打开</li>
    </ul>



    <!-- 搜索框 -->
    <div class="search-wrapper">
        <div class="btn">
            <span></span>
        </div>

        <div class="sou">
            <span class="JD"></span>
            <span class="fangdajing"></span>
        </div>

        <div class="login">
            <span>登陆</span>
        </div>


    </div>


    <!-- Swiper--轮播图（1） -->
    <div class="box1">
        <div class="swiper-container swiper-container1">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="./images/21.jpg.dpg"></div>
                <div class="swiper-slide"><img src="./images/22.jpg.dpg"></div>
                <div class="swiper-slide"><img src="./images/23.jpg.dpg"></div>
                <div class="swiper-slide"><img src="./images/24.jpg.dpg"></div>
                <div class="swiper-slide"><img src="./images/25.jpg.dpg"></div>
                <div class="swiper-slide"><img src="./images/26.jpg.dpg"></div>
                <div class="swiper-slide"><img src="./images/27.jpg.dpg"></div>
                <div class="swiper-slide"><img src="./images/28.jpg.dpg"></div>
            </div>
            <div class="swiper-pagination swiper-pagination1"></div>
        </div>
    </div>


    <!-- Swiper--轮播图(1) JS -->
    <script src="./js/swiper.min.js"></script>
    <script>
        var swiper = new Swiper('.swiper-container1', {
            pagination: {
                el: '.swiper-pagination1',
            },
            loop:true,
            autoplay: {
                delay: 3000,
                stopOnLastSlide: false,
                disableOnInteraction: true,
            }
        });
  </script>

    </script>



    <!-- Swiper 导航条-->
    <div class="box">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <ul>
                        <li><a href="javascript:;"></a><img src="./images/1.png"><span>京东超市</span></li>
                        <li><a href="javascript:;"></a><img src="./images/2.png"><span>数码电器</span></li>
                        <li><a href="javascript:;"></a><img src="./images/3.png"><span>京东服饰</span></li>
                        <li><a href="javascript:;"></a><img src="./images/4.png"><span>京东生鲜</span></li>
                        <li><a href="javascript:;"></a><img src="./images/5.png"><span>京东到家</span></li>
                        <li><a href="javascript:;"></a><img src="./images/6.png"><span>充值缴费</span></li>
                        <li><a href="javascript:;"></a><img src="./images/7.png"><span>9.9元拼</span></li>
                        <li><a href="javascript:;"></a><img src="./images/8.png"><span>领劵</span></li>
                        <li><a href="javascript:;"></a><img src="./images/9.png"><span>借钱</span></li>
                        <li><a href="javascript:;"></a><img src="./images/10.png"><span>PLUS会员</span></li>
                    </ul>
                </div>
                <div class="swiper-slide">
                    <ul>
                        <li><a href="javascript:;"></a><img src="./images/11.png"><span>京东超市</span></li>
                        <li><a href="javascript:;"></a><img src="./images/12.png"><span>数码电器</span></li>
                        <li><a href="javascript:;"></a><img src="./images/13.png"><span>京东服饰</span></li>
                        <li><a href="javascript:;"></a><img src="./images/14.png"><span>京东生鲜</span></li>
                        <li><a href="javascript:;"></a><img src="./images/15.png"><span>京东到家</span></li>
                        <li><a href="javascript:;"></a><img src="./images/16.png"><span>充值缴费</span></li>
                        <li><a href="javascript:;"></a><img src="./images/17.png"><span>9.9元拼</span></li>
                        <li><a href="javascript:;"></a><img src="./images/18.png"><span>领劵</span></li>
                        <li><a href="javascript:;"></a><img src="./images/19.png"><span>借钱</span></li>
                        <li><a href="javascript:;"></a><img src="./images/20.png"><span>PLUS会员</span></li>
                    </ul>
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </div>


    <!-- Swiper 导航条 JS -->
    <script src="./js/swiper.min.js"></script>

    <script>
        var swiper = new Swiper('.swiper-container', {
            pagination: {
                el: '.swiper-pagination',
            },

        });


    </script>
                                                                 


<ul id="footer">
    <li><a href="javascript:;"></a><img src="./images/首页.png"></li>
    <li><a href="javascript:;"></a><img src="./images/分类.png"></li>
    <li><a href="javascript:;"></a><img src="./images/购车.png"></li>
    <li><a href="javascript:;"></a><img src="./images/京喜.png"></li>
    <li><a href="javascript:;"></a><img src="./images/未登录.png"></li>


</ul>
</body>
</html>